$(document).ready(function (){
    /*进入子元素也触发*/

    var textArr=['ReptileText','FishText','BirdText','DogText','CatText']
    for (let i = 0; i < textArr.length; i++) {
        categoryAuto(textArr[i])
    }

    function categoryAuto(textItem){
        // console.log(`\.${textItem}`,`<li class="${textItem}-li">`,`\.${textItem}-div`)
        $(document).on('mouseenter','.'+textItem,function (){
            // console.log('this',this)
            var categoryId=$(this).attr('categoryId');
            console.log('categoryId',categoryId);
            if(categoryId!=''&&categoryId!=null) {
                $.ajax({
                    type: 'POST',
                    url: 'http://localhost:8080/try_war_exploded/categoryForm?categoryId=' + categoryId,

                    success: function (data) {
                        console.log(data);
                        // console.log(data[0].name,data[0].productId);
                        var productListHtml = '';
                        console.log('<li class=\"'+textItem+'-li\">')
                        for (var i = 0; i < data.length; i++) {
                            productListHtml += '<li class=\"'+textItem+'-li\">'
                            productListHtml += i+1;
                            if(i+1<10) {
                                productListHtml += '\xa0'+'\xa0'+'\xa0';
                            }else{
                                productListHtml += '\xa0';
                            }
                            productListHtml += data[i].productId;
                            productListHtml += ': ';
                            productListHtml += data[i].name;
                            productListHtml += '</li>';
                        }
                        var ulItem='.'+textItem+'-ul'
                        var divItem='.'+textItem+'-div'
                        console.log(ulItem,divItem)
                        $(ulItem).html(productListHtml)
                        $(divItem).show();
                    },
                    error: function (errorMessage) {
                        console.log(errorMessage);
                    },

                });
            }else{
                // $SearchAutoComplete.html('');
            }


        });

        $(document).on('mouseleave',`\.${textItem}`,function (){
            console.log(`\.${textItem}`)
            console.log(`\.${textItem}-div`)
            // $('.ReptileText-div').hide();
            $(`\.${textItem}-div`).hide();
        })
    }

    // $(document).on('mouseenter','.ReptileText',function (){
    //     // console.log('this',this)
    //     var categoryId=$(this).attr('categoryId');
    //     console.log('categoryId',categoryId);
    //     if(categoryId!=''&&categoryId!=null) {
    //         $.ajax({
    //             type: 'POST',
    //             url: 'http://localhost:8080/my_pet_store_war_exploded/categoryForm?categoryId=' + categoryId,
    //
    //             success: function (data) {
    //                 console.log(data);
    //                 // console.log(data[0].name,data[0].productId);
    //                 var productListHtml = '';
    //                 for (var i = 0; i < data.length; i++) {
    //                     productListHtml += '<li class="ReptileText-li">';
    //                     productListHtml += i+1;
    //                     if(i+1<10) {
    //                         productListHtml += '\xa0'+'\xa0'+'\xa0';
    //                     }else{
    //                         productListHtml += '\xa0';
    //                     }
    //                     productListHtml += data[i].productId;
    //                     productListHtml += ': ';
    //                     productListHtml += data[i].name;
    //                     productListHtml += '</li>';
    //                 }
    //                 $('.ReptileText-ul').html(productListHtml)
    //                 $('.ReptileText-div').show();
    //             },
    //             error: function (errorMessage) {
    //                 console.log(errorMessage);
    //             },
    //
    //         });
    //     }else{
    //         // $SearchAutoComplete.html('');
    //     }
    //
    //
    // });
    //
    // $(document).on('mouseleave','.ReptileText',function (){
    //     $('.ReptileText-div').hide();
    // })
});
